{% load i18n wagtailcore_tags %}

<div class="scal-outer">
<section class="scal-wrapper">

  {% if bloco.title %}
  <div class="scal-header">
    <h2 class="scal-titulo" {% if bloco.cor_title %}style="color: #{{ bloco.cor_title }};"{% endif %}>
      {{ bloco.title }}
    </h2>
  </div>
  {% endif %}

  {% if todos_itens %}

  {# ── Barra de filtros ── #}
  <div class="scal-filtros" role="group" aria-label="Filtros">

    {# Linha 1: Selects + Toggle de view #}
    <div class="scal-filtros-top">
      <div class="scal-selects">


        {% if mostrar_filtro_apis and areas_disponiveis %}
        <div class="scal-filtros-chips">
          <div class="scal-filtro-grupo">
            <span class="scal-filtro-label">Por área</span>
            <div class="scal-area-dropdown" data-filtro="area">
              <button class="scal-area-btn" type="button" aria-expanded="false">
                <span class="scal-area-btn-label">Todas as áreas</span>
                <span class="material-symbols-outlined" style="font-size:16px;line-height:1;" aria-hidden="true">expand_more</span>
              </button>
              <div class="scal-area-panel" hidden>
                {% for area in areas_disponiveis %}
                <label class="scal-mes-item">
                  <input type="checkbox" class="scal-area-check" value="{{ area }}">
                  <span>{{ area }}</span>
                </label>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% endif %}

        
        {% if anos_disponiveis %}
        <div class="scal-filtros-chips">
          <div class="scal-filtro-grupo">
            <span class="scal-filtro-label">Por ano</span>
            <div class="scal-ano-dropdown" data-filtro="ano">
              <button class="scal-ano-btn" type="button" aria-expanded="false">
                <span class="scal-ano-btn-label">Todos os anos</span>
                <span class="material-symbols-outlined" style="font-size:16px;line-height:1;" aria-hidden="true">expand_more</span>
              </button>
              <div class="scal-ano-panel" hidden>
                <label class="scal-mes-item">
                  <input type="radio" class="scal-ano-radio" name="scal-ano" value="todos" checked>
                  <span>Todos os anos</span>
                </label>
                {% for ano in anos_disponiveis %}
                <label class="scal-mes-item">
                  <input type="radio" class="scal-ano-radio" name="scal-ano" value="{{ ano }}">
                  <span>{{ ano }}</span>
                </label>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% endif %}
        
        <div class="scal-filtros-chips">
          <div class="scal-filtro-grupo">
            <span class="scal-filtro-label">Por meses</span>
            {% if meses_disponiveis %}
            <div class="scal-mes-dropdown" data-filtro="mes">
              <button class="scal-mes-btn" type="button" aria-expanded="false">
                <span class="scal-mes-btn-label">Todos os meses</span>
                <span class="material-symbols-outlined" style="font-size:16px;line-height:1;" aria-hidden="true">expand_more</span>
              </button>
              <div class="scal-mes-panel" hidden>
                {% for item_mes in meses_disponiveis %}
                <label class="scal-mes-item" data-ano="{{ item_mes.ano }}">
                  <input type="checkbox" class="scal-mes-check"
                        value="{{ item_mes.ano }}-{{ item_mes.mes|stringformat:'02d' }}"
                        data-ano="{{ item_mes.ano }}">
                  <span>{{ item_mes.data_ref|date:"F"|capfirst }}<span class="scal-mes-item-ano"> {{ item_mes.ano }}</span></span>
                </label>
                {% endfor %}
              </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="scal-filtros-chips scal-filtros-chips--right">
        <div class="scal-filtro-grupo">
          <span class="scal-filtro-label">Aparência</span>
      <div class="scal-view-toggle" role="group" aria-label="Visualização">
        <button class="scal-view-btn" data-view="kanban" title="Kanban" aria-pressed="false">
          <span class="material-symbols-outlined">view_kanban</span>
        </button>
        <button class="scal-view-btn" data-view="lista" title="Lista" aria-pressed="false">
          <span class="material-symbols-outlined">view_list</span>
        </button>
        <button class="scal-view-btn scal-view-btn--ativo" data-view="calendario" title="Calendário" aria-pressed="true">
          <span class="material-symbols-outlined">calendar_month</span>
        </button>
      </div>
      </div>
        <div class="scal-filtro-grupo">
          <span class="scal-filtro-label">Exportar</span>
          <button class="scal-pdf-btn" type="button" title="Exportar calendário como PDF">
            <span class="material-symbols-outlined">picture_as_pdf</span>
            <span>PDF</span>
          </button>
        </div>
      </div>
      </div>

    {# Linha 2: Chips de filtro #}
    <div class="scal-filtros-chips">
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Status</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="status" data-valor="todos">Todos</button>
          <button class="scal-chip" data-filtro="status" data-valor="aberto">
            <span class="scal-chip-dot scal-dot--aberto"></span>Inscrições abertas
          </button>
          <button class="scal-chip" data-filtro="status" data-valor="previsto">
            <span class="scal-chip-dot scal-dot--previsto"></span>Previsto
          </button>
        </div>
      </div>
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Tipo</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="tipo" data-valor="todos">Todos</button>
          <button class="scal-chip" data-filtro="tipo" data-valor="curso">
            <span class="material-symbols-outlined scal-chip-icon">school</span>Curso
          </button>
          <button class="scal-chip" data-filtro="tipo" data-valor="evento">
            <span class="material-symbols-outlined scal-chip-icon">event</span>Evento
          </button>
        </div>
      </div>

      {% if modalidades_disponiveis|length > 1 %}
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Modalidade</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="modalidade" data-valor="todos">Todos</button>
          {% for m in modalidades_disponiveis %}
          <button class="scal-chip" data-filtro="modalidade" data-valor="{{ m.valor }}">
            <span class="material-symbols-outlined scal-chip-icon">{{ m.icone }}</span>{{ m.label }}
          </button>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      <button class="scal-limpar-filtros scal-limpar-filtros--inline" style="display:none;">
        <span class="material-symbols-outlined" style="font-size:16px;line-height:1;">filter_list_off</span>
        Limpar filtros
      </button>
    </div>

  </div>
  <div class="scal-view" data-view-container="kanban" style="display:none;">
    <div class="scal-board-wrapper">
      <button class="scal-board-nav scal-board-nav--prev" aria-label="Rolar para esquerda">
        <span class="visually-hidden">Rolar para esquerda</span>
        <span class="material-symbols-outlined">chevron_left</span>
      </button>
      <button class="scal-board-nav scal-board-nav--next" aria-label="Rolar para direita">
        <span class="visually-hidden">Rolar para direita</span>
        <span class="material-symbols-outlined">chevron_right</span>
      </button>
    <div class="scal-board">

      {% for grupo in calendario %}
      <div class="scal-coluna"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">

        <div class="scal-coluna-header">
          <span class="scal-coluna-titulo">{{ grupo.data_ref|date:"F" }}</span>
          <span class="scal-coluna-ano">{{ grupo.ano }}</span>
          <span class="scal-coluna-count"><span class="scal-mes-num">{{ grupo.itens|length }}</span></span>
        </div>

        <div class="scal-coluna-itens">
          {% for item in grupo.itens %}
          <div class="scal-card"
               data-status="{{ item.cal_status }}"
               data-modalidade="{{ item.cal_modalidade }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-api="{{ item.cal_api }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}"
               data-dia="{{ item.data_inicio|date:'j' }}"
               data-nome="{{ item.cal_nome }}"
               data-data-inicio="{{ item.data_inicio|date:'Y-m-d' }}"
               {% if item.url %}data-url="{{ item.url }}"{% endif %}
               {% if item.horario %}data-horario="{{ item.horario|slice:':5' }}"{% endif %}>

            {% if item.data_inicio %}
            <div class="scal-card-data">
              <span class="scal-card-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-card-mes-abr">{{ item.data_inicio|date:"M" }}</span>
              <span class="scal-card-semana">{{ item.data_inicio|date:"D" }}</span>
            </div>
            {% endif %}

            <div class="scal-card-body">
              <div class="scal-card-badges-wrapper">
                  <div class="wrapper-tag-title">
                  <div class="scal-card-badges">
                    {% if item.cal_tipo == 'evento' %}
                      <span class="scal-badge scal-badge--evento">Evento</span>
                    {% else %}
                      <span class="scal-badge scal-badge--curso">Curso</span>
                    {% endif %}
                    {% if item.cal_status == 'aberto' %}
                      <span class="scal-badge scal-badge--aberto">Aberto</span>
                    {% endif %}
                  </div>

                  {% if item.cal_nome %}
                  <p class="scal-card-titulo">
                    {% if item.url %}
                      <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
                    {% else %}
                      {{ item.cal_nome }}
                    {% endif %}
                  </p>
                  {% endif %}
                </div>

                  <div class="scal-card-meta">
                    {% if item.cal_modalidade == 'presencial' %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">location_on</span>Presencial
                    </span>
                    {% elif item.cal_modalidade == 'ead' %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">computer</span>EaD
                    </span>
                    {% elif item.cal_modalidade == 'hibrido' %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">device_hub</span>Híbrido
                    </span>
                    {% elif item.cal_modalidade == 'online' %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">live_tv</span>Online ao vivo
                    </span>
                    {% else %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">laptop</span>Remoto
                    </span>
                    {% endif %}
                    {% if item.horario %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}
                    </span>
                    {% endif %}
                    {% if item.carga_horaria %}
                    <span class="scal-meta-item">
                      <span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h
                    </span>
                    {% endif %}
                  </div>
              </div>
            </div>

            {% if item.data_inicio %}
            <div class="scal-card-actions" role="group" aria-label="Exportar para calendário">
              <button class="scal-export-btn" data-export="google" type="button" title="Adicionar ao Google Calendar" aria-label="Google Calendar">
                <span class="material-symbols-outlined" aria-hidden="true">event_available</span>
              </button>
            </div>
            {% endif %}

          </div>
          {% endfor %}

          <div class="scal-coluna-vazia" style="display:none;">
            <span class="material-symbols-outlined">event_busy</span>
            <p>Sem itens</p>
          </div>
        </div>

      </div>
      {% endfor %}

    </div>
    </div>
  </div>


  <div class="scal-view" data-view-container="lista" style="display:none;">
    <div class="scal-lista">

      {% for grupo in calendario %}
      <div class="scal-lista-grupo"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">

        <div class="scal-lista-mes-header">
          <span class="scal-lista-mes-titulo">{{ grupo.data_ref|date:"F Y"|capfirst }}</span>
          <span class="scal-lista-mes-count"><span class="scal-lista-mes-num">{{ grupo.itens|length }}</span> itens</span>
        </div>

        <div class="scal-lista-itens">
          {% for item in grupo.itens %}
          <div class="scal-lista-row"
               data-status="{{ item.cal_status }}"
               data-modalidade="{{ item.cal_modalidade }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-api="{{ item.cal_api }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}"
               data-nome="{{ item.cal_nome }}"
               data-data-inicio="{{ item.data_inicio|date:'Y-m-d' }}"
               {% if item.url %}data-url="{{ item.url }}"{% endif %}
               {% if item.horario %}data-horario="{{ item.horario|slice:':5' }}"{% endif %}>

            {% if item.data_inicio %}
            <div class="scal-lista-data">
              <span class="scal-lista-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-lista-mes-abr">{{ item.data_inicio|date:"M" }}</span>
              <span class="scal-card-semana">{{ item.data_inicio|date:"D" }}</span>
            </div>
            {% endif %}

            <div class="scal-lista-badges">
              {% if item.cal_tipo == 'evento' %}
                <span class="scal-badge scal-badge--evento">Evento</span>
              {% else %}
                <span class="scal-badge scal-badge--curso">Curso</span>
              {% endif %}
              {% if item.cal_status == 'aberto' %}
                <span class="scal-badge scal-badge--aberto">Aberto</span>
              {% endif %}
            </div>

            <p class="scal-lista-nome">
              {% if item.url %}
                <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
              {% else %}
                {{ item.cal_nome }}
              {% endif %}
            </p>

            <div class="scal-lista-meta">
              {% if item.cal_modalidade == 'presencial' %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">location_on</span>Presencial
                </span>
              {% elif item.cal_modalidade == 'ead' %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">computer</span>EaD
                </span>
              {% elif item.cal_modalidade == 'hibrido' %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">device_hub</span>Híbrido
                </span>
              {% elif item.cal_modalidade == 'online' %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">live_tv</span>Online ao vivo
                </span>
              {% else %}
                <span class="scal-meta-item">
                  <span class="material-symbols-outlined scal-meta-icon">laptop</span>Remoto
                </span>
              {% endif %}
              {% if item.horario %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}
              </span>
              {% endif %}
              {% if item.carga_horaria %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h
              </span>
              {% endif %}
            </div>

            {% if item.data_inicio %}
            <div class="scal-lista-export" aria-label="Exportar para calendário">
              <button class="scal-export-btn" data-export="google" type="button" title="Adicionar ao Google Calendar" aria-label="Google Calendar">
                <span class="material-symbols-outlined" aria-hidden="true">event_available</span>
              </button>
            </div>
            {% endif %}

          </div>
          {% endfor %}
        </div>

      </div>
      {% endfor %}

    </div>
  </div>


  <div class="scal-view" data-view-container="calendario">
    <div class="scal-grid-cards"></div>
  </div>

  {# ── Paginação ── #}
  <div class="scal-paginacao" style="display:none;">
    <button class="scal-ver-mais-btn" type="button">
      <span class="material-symbols-outlined">expand_more</span>Ver mais
    </button>
    <button class="scal-ver-menos-btn" type="button" style="display:none;">
      <span class="material-symbols-outlined">expand_less</span>Ver menos
    </button>
  </div>

  {# ── Estado vazio geral ── #}
  <div class="scal-vazio-filtro" style="display:none;" aria-live="polite">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item encontrado com os filtros selecionados.</p>
    <button class="scal-limpar-filtros">Limpar filtros</button>
  </div>

  {% else %}
  <div class="scal-vazio-filtro">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item disponível no momento.</p>
  </div>
  {% endif %}

  {# Frame de impressão/PDF (montado por JS) #}
  <div class="scal-print-frame" aria-hidden="true"></div>

</section>
</div>

<style>
  /* ── Wrapper ── */
  .scal-outer {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .scal-wrapper {
    width: 100%;
    max-width: 1200px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* ── Título ── */
  .scal-header { text-align: center; }
  .scal-titulo { font-size: 40px; font-weight: 600; color: #434A54; margin: 0; }

  /* ── Filtros ── */
  .scal-filtros {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #F5F7FA;
    border-radius: 12px;
    padding: 20px 24px;
  }

  /* Linha 1: selects + toggle */
  .scal-filtros-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .scal-selects {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .scal-select {
    padding: 7px 32px 7px 12px;
    border-radius: 8px;
    border: 1.5px solid #C8D1E0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2358606E' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;
    -webkit-appearance: none;
    appearance: none;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 140px;
  }
  .scal-select:focus { outline: none; border-color: #007D7A; }

  /* ── Dropdown de áreas ── */
  .scal-area-dropdown { position: relative; }
  .scal-area-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1.5px solid #C8D1E0;
    background: #fff;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 140px;
    white-space: nowrap;
    transition: border-color 0.15s;
  }
  .scal-area-btn:focus { outline: none; border-color: #007D7A; }
  .scal-area-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1.5px solid #C8D1E0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px 0;
  }

  /* ── Dropdown de meses e anos ── */
  .scal-mes-dropdown, .scal-ano-dropdown { position: relative; }
  .scal-ano-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1.5px solid #C8D1E0;
    background: #fff;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 140px;
    white-space: nowrap;
    transition: border-color 0.15s;
  }
  .scal-ano-btn:focus { outline: none; border-color: #007D7A; }
  .scal-ano-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1.5px solid #C8D1E0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 140px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 0;
  }
  .scal-ano-radio { accent-color: #007D7A; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }

  .scal-mes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1.5px solid #C8D1E0;
    background: #fff;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-width: 140px;
    white-space: nowrap;
    transition: border-color 0.15s;
  }
  .scal-mes-btn:focus { outline: none; border-color: #007D7A; }
  .scal-mes-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1.5px solid #C8D1E0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 180px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px 0;
  }
  .scal-mes-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #58606E;
    font-weight: 500;
    transition: background 0.1s;
    white-space: nowrap;
  }
  .scal-mes-item:hover { background: #F5F7FA; }
  .scal-mes-item--oculta { display: none !important; }
  .scal-mes-check { accent-color: #007D7A; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
  .scal-mes-item-ano { color: #9AA3AF; }
  .scal-mes-panel--ano-filtrado .scal-mes-item-ano { display: none; }

  /* View toggle */
  .scal-view-toggle {
    display: flex;
    gap: 4px;
    background: white;
    border: 1.5px solid #C8D1E0;
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
    color: #58606E;
  }
  .scal-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #007D7A;
    cursor: pointer;
  }
  .scal-view-btn:hover { background: #007D7A; color: white; }
  .scal-view-btn--ativo { background: #025257; color:white; box-shadow: 0 1px 4px rgba(0,0,0,0.12);display: flex;
    align-items: center;
    justify-content: center; }
  .scal-view-btn .material-symbols-outlined { font-size: 20px; margin: 0; font-weight: 600; color: inherit;}

  /* Botão PDF */
  .scal-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 10px;
    border-radius: 8px;
    border: 1.5px solid #C8D1E0;
    background: #fff;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  .scal-pdf-btn:hover { background: #006969; color:white; }
  .scal-pdf-btn .material-symbols-outlined { font-size: 18px; }

  .scal-filtros-chips--right { margin-left: auto; }

  /* Remove borda/padding dos chips que estão dentro da linha de topo (dropdowns) */
  .scal-filtros-top .scal-filtros-chips,
  .scal-filtros-top .scal-filtros-chips--right {
    border-top: none;
    padding-top: 0;
  }

  /* Linha 2: chips */
  .scal-filtros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid #E2E8F0;
    padding-top: 16px;
  }
  .scal-filtro-grupo { display: flex; gap: 10px; flex-direction: column; }
  .scal-filtro-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #9AA3AF;
    letter-spacing: 0.8px;
    white-space: nowrap;
  }
  .scal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .scal-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 24px;
    border: 1.5px solid #C8D1E0;
    background: #fff;
    color: #58606E;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .scal-chip:hover { background: #006969; color: white; }
  .scal-chip--ativo { border-color: #024248; background: #024248; color: #fff; }
  .scal-chip--ativo:hover { background: #006969; color: white; }
  .scal-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .scal-dot--aberto   { background: #2E7D32; }
  .scal-dot--previsto { background: #9E9E9E; }
  .scal-chip-icon { font-size: 14px; line-height: 1; color: inherit; }

  /* ══════════════════════════════════════════
     VIEW: KANBAN
  ══════════════════════════════════════════ */
  .scal-board-wrapper {
    position: relative;
  }
  .scal-board-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 4px;
    background-color: #007D7A;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, opacity 0.25s;
  }
  .scal-board-nav:hover { background-color: #006969; }
  .scal-board-nav:active { background-color: #025257; }
  .scal-board-nav--prev { left: 0; box-shadow: 2px 5px 8px rgba(0,0,0,0.25); }
  .scal-board-nav--next { right: 0; box-shadow: -1px 4px 7px rgba(0,0,0,0.25); }
  .scal-board-nav--oculto { opacity: 0; pointer-events: none; }
  .scal-board-nav .material-symbols-outlined { font-size: 28px; font-weight: 900; }
  @media (max-width: 640px) { .scal-board-nav { display: none; } }
  .scal-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
    align-items: flex-start;
    scrollbar-width: thin;
    scrollbar-color: #C8D1E0 transparent;
  }
  .scal-board::-webkit-scrollbar { height: 6px; }
  .scal-board::-webkit-scrollbar-track { background: transparent; }
  .scal-board::-webkit-scrollbar-thumb { background: #C8D1E0; border-radius: 3px; }

  .scal-coluna {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .scal-coluna--vazia-total { opacity: 0.4; }

  .scal-coluna-header {
    position: sticky;
    top: 0;
    background: #024248;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1;
  }
  .scal-coluna-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
    flex: 1;
  }
  .scal-coluna-ano { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 400; }
  .scal-coluna-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
  }
  .scal-coluna-itens { display: flex; flex-direction: column; gap: 8px; }

  .scal-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    position: relative;
    transition: box-shadow 0.15s, transform 0.15s;
  }
  .scal-card:hover { box-shadow: 0 4px 16px rgba(0,125,122,0.12); color: #006969; background-color: #EBEFF5; text-decoration: none;}
  .scal-card:has(.scal-card-link) { cursor: pointer; }
  .scal-card--oculto { display: none; }

  .scal-card-data {
    flex-shrink: 0;
    width: 52px;
    background: #F5F7FA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    gap: 1px;
    border-right: 1px solid #E2E8F0;
    text-align: center;
  }
  .scal-card-dia { font-size: 30px; font-weight: 700; color: #007D7A; line-height: 1; }
  .scal-card-mes-abr {
    font-size: 14px;
    font-weight: 300;
    color: #58606E;
    letter-spacing: 0.5px;
  }
  .scal-card-badges-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 8px;
  }
  .scal-card-body {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .scal-card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
  .scal-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
  }
  .scal-badge--evento    { border: 1px solid #D1441F; color: #D1441F; background: #FFFFFF; }
  .scal-badge--curso     { border: 1px solid #024248; color: #024248; background: #FFFFFF; }
  .scal-badge--aberto    { background: #2E7D32; border: 1px solid #2E7D32; color: #fff; font-weight: 700; }
  .scal-badge--previsto  { border: 1px solid #313E36; color: #313E36; background: #FFFFFF; }
  .scal-badge--modalidade { border: 1px solid #8250BD; color: #8250BD; background: #FFFFFF; }
  .scal-badge--presencial { border: 1px solid #E65100; color: #E65100; background: #FFF3E0; }
  .scal-badge--ead        { border: 1px solid #0277BD; color: #0277BD; background: #E1F5FE; }
  .scal-badge--hibrido    { border: 1px solid #00695C; color: #00695C; background: #E0F2F1; }
  .scal-badge--online     { border: 1px solid #6A1B9A; color: #6A1B9A; background: #F3E5F5; }
  .scal-badge-icon { font-size: 11px; line-height: 1; color: inherit; }

  .scal-card-titulo {
    font-size: 16px;
    font-weight: 600;
    color: #434A54;
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .wrapper-tag-title{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .scal-card-link { color: #007D7A; text-decoration: none; }
  .scal-card-link:hover { text-decoration: underline; }
  .scal-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

  .scal-card-meta { display: flex; flex-wrap: wrap; gap: 8px; }
  .scal-meta-item { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; color: #58606E; }
  .scal-meta-icon { font-size: 13px; line-height: 1; }

  .scal-coluna-vazia {
    text-align: center;
    padding: 24px 12px;
    color: #C8D1E0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px dashed #EBEFF5;
    border-radius: 10px;
  }
  .scal-coluna-vazia .material-symbols-outlined { font-size: 28px; }
  .scal-coluna-vazia p { font-size: 12px; margin: 0; }

  /* ══════════════════════════════════════════
     VIEW: LISTA
  ══════════════════════════════════════════ */
  .scal-lista { display: flex; flex-direction: column; gap: 20px; }

  .scal-lista-grupo { display: flex; flex-direction: column; }

  .scal-lista-mes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #024248;
    border-radius: 10px 10px 0 0;
  }
  .scal-lista-mes-titulo { font-size: 18px; font-weight: 700; color: #fff; text-transform: capitalize; }
  .scal-lista-mes-count {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.15);
    padding: 2px 10px;
    border-radius: 10px;
  }

  .scal-lista-itens {
    border: 1px solid #E2E8F0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
  }

  .scal-lista-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid #F0F4F8;
    transition: background 0.12s;
    position: relative;
  }
  .scal-lista-row:last-child { border-bottom: none; }
  .scal-lista-row:hover { color: #006969; background-color: #EBEFF5; }

  .scal-lista-data {
    flex-shrink: 0;
    width: 44px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .scal-lista-dia { font-size: 18px; font-weight: 700; color: #007D7A; line-height: 1; }
  .scal-lista-mes-abr {
    font-size: 14px;
    font-weight: 600;
    color: #58606E;
    letter-spacing: 0.5px;
  }

  .scal-lista-badges { flex-shrink: 0; display: flex; gap: 4px; align-items: center; }

  .scal-lista-nome {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #434A54;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .scal-lista-meta {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    align-items: center;
  }

  /* ══════════════════════════════════════════
     VIEW: GRID DE CARDS
  ══════════════════════════════════════════ */
  .scal-grid-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .scal-grid-mes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin-bottom: 12px;
    color: 004248;
    border-top: 1px solid #58616E;
  }
  .scal-grid-mes-titulo { font-size: 18px; font-weight: 700; color: #004248; }
  .scal-grid-mes-count {
    font-size: 14px;
    color: #004248;
    background: #D6F9F8;
    padding: 2px 10px;
    border-radius: 10px;
  }
  .scal-grid-mes-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .scal-grid-mes-cards .scal-card {
    height: 100%;
  }
  @media (max-width: 960px) {
    .scal-grid-mes-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .scal-grid-mes-cards { grid-template-columns: 1fr; }
  }

  /* ── Estado vazio geral ── */
  .scal-vazio-filtro {
    text-align: center;
    padding: 48px 20px;
    color: #9AA3AF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .scal-vazio-icon { font-size: 48px; color: #C8D1E0; }
  .scal-limpar-filtros {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 24px;
    border: 1.5px solid #007D7A;
    background: #fff;
    color: #007D7A;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .scal-limpar-filtros:hover { background: #007D7A; color: #fff; }
  .scal-limpar-filtros--inline { align-self: center; margin-left: auto; }

  /* ── Paginação ── */
  .scal-card--paginado { display: none !important; }
  .scal-lista-row--paginado { display: none !important; }
  .scal-paginacao {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 4px;
  }
  .scal-ver-mais-btn, .scal-ver-menos-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border-radius: 8px;
    border: 1.5px solid #007D7A;
    background: #fff;
    color: #007D7A;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .scal-ver-mais-btn:hover, .scal-ver-menos-btn:hover { background: #007D7A; color: #fff; }
  .scal-ver-mais-btn .material-symbols-outlined, .scal-ver-menos-btn .material-symbols-outlined { font-size: 18px; }

  /* ── Destaque: Inscrições abertas ── */
  .scal-dot--aberto {
    background: #2E7D32;
    animation: scal-pulse 1.5s ease-in-out infinite;
  }
  @keyframes scal-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.65); }
  }

  /* ── Export buttons ── */
  .scal-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .scal-card:hover .scal-card-actions { opacity: 1; }
  .scal-lista-export {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    z-index: 2;
    position: relative;
  }
  .scal-export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #007D7A;
    background: #007D7A;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
  }
  .scal-export-btn:hover { background: #024248; color: #fff; border-color: #024248; }
  .scal-export-btn .material-symbols-outlined { font-size: 15px; line-height: 1; display: flex; margin: 0; color: white; }

  /* ── Dia da semana ── */
  .scal-card-semana {
    font-size: 14px;
    font-weight: 300;
    color: #58606E;
    letter-spacing: 0.4px;
    margin-top: 2px;
  }

  /* ── Lazy loading sentinel ── */
  .scal-sentinel { display: flex; justify-content: center; padding: 32px 20px; }
  .scal-loading-spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #024248;
    font-size: 14px;
  }
  .scal-loading-icon {
    font-size: 22px;
    animation: scal-spin 0.9s linear infinite;
  }
  @keyframes scal-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* ── Responsivo ── */
  @media (max-width: 640px) {
    .scal-wrapper { padding: 24px 16px; gap: 20px; }
    .scal-titulo { font-size: 28px; }
    .scal-filtros { padding: 16px; }
    .scal-filtros-top { flex-direction: column; align-items: flex-start; }
    .scal-selects { width: 100%; }
    .scal-select { flex: 1; min-width: 100px; }
    .scal-coluna { flex: 0 0 220px; }
    .scal-cal-dia, .scal-cal-dia-empty { min-height: 72px; padding: 4px; }
    .scal-cal-titulo-mes { font-size: 15px; min-width: 160px; }
    .scal-lista-meta { display: none; }
    .scal-lista-nome { white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  }

  /* ── Print / PDF ── */
  .scal-print-frame { display: none; }

  @media print {
    body * { visibility: hidden !important; }
    .scal-print-frame, .scal-print-frame * { visibility: visible !important; }
    .scal-print-frame {
      position: fixed !important;
      inset: 0 !important;
      z-index: 99999 !important;
      background: #fff !important;
      padding: 12mm 14mm !important;
      overflow: visible !important;
      display: block !important;
    }
    /* Garante que cores de fundo apareçam */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    /* Remove interações no print */
    .scal-print-frame .scal-card-actions { display: none !important; }
    .scal-print-frame .scal-card-link::after { display: none !important; }
    .scal-print-frame .scal-card:hover { box-shadow: none !important; transform: none !important; background: #fff !important; }
    /* Grid de 3 colunas no print (melhor para A4) */
    .scal-print-frame .scal-grid-mes-cards { grid-template-columns: repeat(3, 1fr) !important; }
    /* Quebra de página entre meses */
    .scal-print-frame .scal-print-mes { break-inside: avoid; }
  }

  /* Cabeçalho do PDF */
  .scal-print-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #024248;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  .scal-print-cabecalho-titulo {
    font-size: 20px;
    font-weight: 700;
    color: #024248;
    margin: 0 0 4px;
  }
  .scal-print-cabecalho-filtros {
    font-size: 11px;
    color: #666;
    margin: 0;
  }
  .scal-print-cabecalho-data {
    font-size: 11px;
    color: #666;
    text-align: right;
    white-space: nowrap;
    line-height: 1.6;
  }
  .scal-print-mes { margin-bottom: 24px; }
</style>

<script>
  (function () {
    /* ── Encontra o wrapper: currentScript é mais confiável, fallback por marca ── */
    var wrapper = null;
    if (document.currentScript) {
      wrapper = document.currentScript.closest('.scal-outer');
    }
    if (!wrapper) {
      var outers = document.querySelectorAll('.scal-outer:not([data-scal-init])');
      wrapper = outers[outers.length - 1] || null;
    }
    if (!wrapper) return;
    wrapper.setAttribute('data-scal-init', '1');

    var filtros = { areas: [], ano: 'todos', meses: [], status: 'todos', modalidade: 'todos', tipo: 'todos' };
    var viewAtual = 'calendario';
    var viewManual = false; // true somente após clique manual no toggle

    // Estado do calendário
    var hoje = new Date();
    var calAno = hoje.getFullYear();
    var calMes = hoje.getMonth() + 1;


    /* ── Toggle de view ── */
    wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        mudarView(btn.dataset.view, true);
      });
    });

    function mudarView(view, manual) {
      if (manual) viewManual = true;   // só seta true; nunca reseta para false aqui
      viewAtual = view;

      wrapper.querySelectorAll('.scal-view').forEach(function (el) {
        el.style.display = el.dataset.viewContainer === view ? '' : 'none';
      });
      wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
        var ativo = btn.dataset.view === view;
        btn.classList.toggle('scal-view-btn--ativo', ativo);
        btn.setAttribute('aria-pressed', ativo ? 'true' : 'false');
      });

      if (view === 'calendario') {
        if (filtros.meses.length === 1) {
          var parts = filtros.meses[0].split('-');
          calAno = parseInt(parts[0]);
          calMes = parseInt(parts[1]);
        }
        var nav = wrapper.querySelector('.scal-cal-nav');
        if (nav) nav.style.display = filtros.meses.length > 0 ? 'none' : '';
        renderizarCalendario();
      }
    }

    /* ── Dropdown de ano ── */
    var anoDropdown = wrapper.querySelector('.scal-ano-dropdown');
    if (anoDropdown) {
      var anoBtn = anoDropdown.querySelector('.scal-ano-btn');
      var anoPanelEl = anoDropdown.querySelector('.scal-ano-panel');

      anoBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !anoPanelEl.hidden;
        anoPanelEl.hidden = aberto;
        anoBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      anoPanelEl.querySelectorAll('.scal-ano-radio').forEach(function (radio) {
        radio.addEventListener('change', function () {
          filtros.ano = radio.value;
          atualizarLabelAno();
          anoPanelEl.hidden = true;
          anoBtn.setAttribute('aria-expanded', 'false');
          filtrarMesesPorAno(radio.value);
          if (radio.value !== 'todos') {
            mudarView('calendario', true);
          } else if (viewAtual === 'calendario') {
            viewManual = false;
          }
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!anoDropdown.contains(e.target)) {
          anoPanelEl.hidden = true;
          anoBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    function atualizarLabelAno() {
      var btn = wrapper.querySelector('.scal-ano-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-ano-btn-label');
      if (!label) return;
      label.textContent = filtros.ano === 'todos' ? 'Todos os anos' : filtros.ano;
    }

    /* ── Chips ── */
    wrapper.querySelectorAll('.scal-chip').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var grupo = btn.dataset.filtro;
        filtros[grupo] = btn.dataset.valor;
        wrapper.querySelectorAll('.scal-chip[data-filtro="' + grupo + '"]')
          .forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        btn.classList.add('scal-chip--ativo');
        // Não altera viewManual — mantém a view atual
        aplicarFiltros();
      });
    });

    /* ── Dropdown de meses ── */
    var mesDropdown = wrapper.querySelector('.scal-mes-dropdown');
    if (mesDropdown) {
      var mesBtn = mesDropdown.querySelector('.scal-mes-btn');
      var mesPanelEl = mesDropdown.querySelector('.scal-mes-panel');

      mesBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !mesPanelEl.hidden;
        mesPanelEl.hidden = aberto;
        mesBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      mesPanelEl.querySelectorAll('.scal-mes-check').forEach(function (cb) {
        cb.addEventListener('change', function () {
          if (cb.checked) {
            filtros.meses.push(cb.value);
          } else {
            filtros.meses = filtros.meses.filter(function (m) { return m !== cb.value; });
          }
          atualizarLabelMes();
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!mesDropdown.contains(e.target)) {
          mesPanelEl.hidden = true;
          mesBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    /* ── Dropdown de áreas ── */
    var areaDropdown = wrapper.querySelector('.scal-area-dropdown');
    if (areaDropdown) {
      var areaBtn = areaDropdown.querySelector('.scal-area-btn');
      var areaPanelEl = areaDropdown.querySelector('.scal-area-panel');

      areaBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !areaPanelEl.hidden;
        areaPanelEl.hidden = aberto;
        areaBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      areaPanelEl.querySelectorAll('.scal-area-check').forEach(function (cb) {
        cb.addEventListener('change', function () {
          if (cb.checked) {
            filtros.areas.push(cb.value);
          } else {
            filtros.areas = filtros.areas.filter(function (a) { return a !== cb.value; });
          }
          atualizarLabelArea();
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!areaDropdown.contains(e.target)) {
          areaPanelEl.hidden = true;
          areaBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    function atualizarLabelArea() {
      var btn = wrapper.querySelector('.scal-area-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-area-btn-label');
      if (!label) return;
      if (filtros.areas.length === 0) {
        label.textContent = 'Todas as áreas';
      } else if (filtros.areas.length === 1) {
        label.textContent = filtros.areas[0];
      } else {
        label.textContent = filtros.areas.length + ' áreas';
      }
    }

    function atualizarLabelMes() {
      var btn = wrapper.querySelector('.scal-mes-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-mes-btn-label');
      if (!label) return;
      if (filtros.meses.length === 0) {
        label.textContent = 'Todos os meses';
      } else if (filtros.meses.length === 1) {
        var cb = wrapper.querySelector('.scal-mes-check[value="' + filtros.meses[0] + '"]');
        if (cb) {
          var itemEl = cb.closest('.scal-mes-item');
          label.textContent = itemEl ? itemEl.querySelector('span').textContent.trim() : filtros.meses[0];
        }
      } else {
        label.textContent = filtros.meses.length + ' meses';
      }
    }

    function filtrarMesesPorAno(ano) {
      var panel = wrapper.querySelector('.scal-mes-panel');
      if (!panel) return;
      panel.classList.toggle('scal-mes-panel--ano-filtrado', ano !== 'todos');
      panel.querySelectorAll('.scal-mes-item').forEach(function (item) {
        var mostra = ano === 'todos' || item.dataset.ano === ano;
        item.classList.toggle('scal-mes-item--oculta', !mostra);
        if (!mostra) {
          var cb = item.querySelector('.scal-mes-check');
          if (cb && cb.checked) {
            cb.checked = false;
            filtros.meses = filtros.meses.filter(function (m) { return m !== cb.value; });
          }
        }
      });
      atualizarLabelMes();
    }

    /* ── Limpar filtros ── */
    wrapper.querySelectorAll('.scal-limpar-filtros').forEach(function (btnLimpar) {
      btnLimpar.addEventListener('click', function () {
        filtros = { areas: [], ano: 'todos', meses: [], status: 'todos', modalidade: 'todos', tipo: 'todos' };
        var radioTodos = wrapper.querySelector('.scal-ano-radio[value="todos"]');
        if (radioTodos) radioTodos.checked = true;
        wrapper.querySelectorAll('.scal-mes-check').forEach(function (cb) { cb.checked = false; });
        wrapper.querySelectorAll('.scal-area-check').forEach(function (cb) { cb.checked = false; });
        wrapper.querySelectorAll('.scal-mes-item').forEach(function (item) { item.classList.remove('scal-mes-item--oculta'); });
        var resetPanel = wrapper.querySelector('.scal-mes-panel');
        if (resetPanel) resetPanel.classList.remove('scal-mes-panel--ano-filtrado');
        atualizarLabelAno();
        atualizarLabelMes();
        atualizarLabelArea();
        wrapper.querySelectorAll('.scal-chip[data-valor="todos"]').forEach(function (b) { b.classList.add('scal-chip--ativo'); });
        wrapper.querySelectorAll('.scal-chip:not([data-valor="todos"])').forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        viewManual = false;
        aplicarFiltros();
      });
    });


    /* ── Mostrar/ocultar botão limpar inline ── */
    function atualizarBtnLimpar() {
      var temFiltro = filtros.areas.length > 0 || filtros.meses.length > 0 ||
        Object.keys(filtros).some(function (k) {
          return k !== 'areas' && k !== 'meses' && filtros[k] !== 'todos';
        });
      var btnInline = wrapper.querySelector('.scal-limpar-filtros--inline');
      if (btnInline) btnInline.style.display = temFiltro ? '' : 'none';
    }

    /* ── Filtro por item ── */
    function itemPassaFiltro(el) {
      return (
        (filtros.areas.length === 0    || filtros.areas.indexOf(el.dataset.area) !== -1) &&
        (filtros.ano        === 'todos' || el.dataset.ano        === filtros.ano) &&
        (filtros.meses.length === 0    || filtros.meses.indexOf(el.dataset.mes) !== -1) &&
        (filtros.status     === 'todos' || el.dataset.status     === filtros.status) &&
        (filtros.modalidade === 'todos' || el.dataset.modalidade === filtros.modalidade) &&
        (filtros.tipo       === 'todos' || el.dataset.tipo       === filtros.tipo)
      );
    }

    /* ── Paginação ── */
    var PAGINA_ITENS = 30;
    var paginaAtual = PAGINA_ITENS;

    function aplicarPaginacao() {
      var cont = 0;
      var temMais = false;

      /* Kanban: limita cards visíveis globalmente */
      wrapper.querySelectorAll('.scal-board .scal-coluna').forEach(function (coluna) {
        coluna.querySelectorAll('.scal-card:not(.scal-card--oculto)').forEach(function (card) {
          cont++;
          var paginado = cont > paginaAtual;
          card.classList.toggle('scal-card--paginado', paginado);
          if (paginado) temMais = true;
        });
        /* Atualiza count da coluna excluindo paginados */
        var num = coluna.querySelector('.scal-mes-num');
        if (num) num.textContent = coluna.querySelectorAll('.scal-card:not(.scal-card--oculto):not(.scal-card--paginado)').length;
      });

      /* Lista: limita rows visíveis globalmente */
      cont = 0;
      wrapper.querySelectorAll('.scal-lista .scal-lista-grupo').forEach(function (grupo) {
        if (grupo.style.display === 'none') return;
        var visivelNaPag = 0;
        grupo.querySelectorAll('.scal-lista-row').forEach(function (row) {
          if (row.style.display === 'none') return; /* filtrado */
          cont++;
          var paginado = cont > paginaAtual;
          row.classList.toggle('scal-lista-row--paginado', paginado);
          if (paginado) temMais = true;
          else visivelNaPag++;
        });
        /* Se todas as rows do grupo foram paginadas, esconde o grupo */
        var totalNaoFiltradas = grupo.querySelectorAll('.scal-lista-row:not([style*="display: none"])').length;
        if (totalNaoFiltradas > 0 && visivelNaPag === 0) grupo.style.display = 'none';
        var numEl = grupo.querySelector('.scal-lista-mes-num');
        if (numEl) numEl.textContent = visivelNaPag;
      });

      /* Botões */
      var paginacaoEl = wrapper.querySelector('.scal-paginacao');
      var verMaisBtn  = wrapper.querySelector('.scal-ver-mais-btn');
      var verMenosBtn = wrapper.querySelector('.scal-ver-menos-btn');
      var mostraBotoes = temMais || paginaAtual > PAGINA_ITENS;
      if (paginacaoEl) paginacaoEl.style.display = mostraBotoes ? '' : 'none';
      if (verMaisBtn)  verMaisBtn.style.display  = temMais ? '' : 'none';
      if (verMenosBtn) verMenosBtn.style.display = paginaAtual > PAGINA_ITENS ? '' : 'none';

      /* Re-renderiza calendário se ativo */
      if (viewAtual === 'calendario') renderizarCalendario();
    }

    /* ── Reordenar grupos de meses no DOM ──
       Regra: mês atual + futuros em ordem crescente, passados em ordem decrescente.
       Quando filtro de ano específico: só considera meses daquele ano.
    ── */
    function reordenarGruposDom(container, seletor) {
      if (!container) return;
      var mesAtual = hoje.getFullYear() + '-' + (hoje.getMonth() + 1 < 10 ? '0' : '') + (hoje.getMonth() + 1);
      var grupos = Array.prototype.slice.call(container.querySelectorAll(seletor));
      if (grupos.length === 0) return;

      var futuros = [];
      var passados = [];
      grupos.forEach(function (el) {
        var mes = el.dataset.mes || '';
        if (mes >= mesAtual) {
          futuros.push(el);
        } else {
          passados.push(el);
        }
      });

      // futuros: crescente (já estão na ordem certa)
      // passados: decrescente (inverter)
      passados.reverse();

      var ordenados = futuros.concat(passados);
      ordenados.forEach(function (el) {
        container.appendChild(el);
      });
    }

    /* ── Aplicar filtros ── */
    function aplicarFiltros() {
      paginaAtual = PAGINA_ITENS; /* reseta paginação ao mudar filtros */
      atualizarBtnLimpar();
      var totalVisiveis = 0;

      /* Kanban */
      wrapper.querySelectorAll('.scal-coluna').forEach(function (coluna) {
        var cards = coluna.querySelectorAll('.scal-card');
        var visiveis = 0;
        cards.forEach(function (card) {
          var ok = itemPassaFiltro(card);
          card.classList.toggle('scal-card--oculto', !ok);
          if (ok) { visiveis++; totalVisiveis++; }
        });
        var num = coluna.querySelector('.scal-mes-num');
        if (num) num.textContent = visiveis;
        var vazio = coluna.querySelector('.scal-coluna-vazia');
        if (vazio) vazio.style.display = visiveis === 0 ? 'flex' : 'none';
        coluna.classList.toggle('scal-coluna--vazia-total', visiveis === 0);
      });
      reordenarGruposDom(wrapper.querySelector('.scal-board'), '.scal-coluna');

      /* Lista */
      wrapper.querySelectorAll('.scal-lista-grupo').forEach(function (grupo) {
        var rows = grupo.querySelectorAll('.scal-lista-row');
        var visiveis = 0;
        rows.forEach(function (row) {
          var ok = itemPassaFiltro(row);
          row.style.display = ok ? '' : 'none';
          if (ok) visiveis++;
        });
        var numEl = grupo.querySelector('.scal-lista-mes-num');
        if (numEl) numEl.textContent = visiveis;
        grupo.style.display = visiveis === 0 ? 'none' : '';
      });
      reordenarGruposDom(wrapper.querySelector('.scal-lista'), '.scal-lista-grupo');

      /* Estado vazio */
      var vazioEl = wrapper.querySelector('.scal-vazio-filtro');
      if (vazioEl) vazioEl.style.display = totalVisiveis === 0 ? '' : 'none';

      /* Auto-view */
      if (!viewManual) {
        var autoView;
        if (totalVisiveis > 80) {
          autoView = 'lista';
        } else {
          autoView = 'calendario';
        }
        mudarView(autoView, false);
      }

      aplicarPaginacao();
    }

    /* ── Renderizar grid de cards com lazy loading ── */
    var scalObserver = null;
    var gruposMeses = [];
    var gruposRenderizados = 0;
    var MESES_POR_PAGINA = 3;

    function renderizarCalendario() {
      var grid = wrapper.querySelector('.scal-grid-cards');
      if (!grid) return;

      if (scalObserver) { scalObserver.disconnect(); scalObserver = null; }

      gruposMeses = [];
      wrapper.querySelectorAll('[data-view-container="kanban"] .scal-coluna').forEach(function (coluna) {
        var cardsVisiveis = coluna.querySelectorAll('.scal-card:not(.scal-card--oculto):not(.scal-card--paginado)');
        if (cardsVisiveis.length === 0) return;
        var tituloEl = coluna.querySelector('.scal-coluna-titulo');
        var anoEl = coluna.querySelector('.scal-coluna-ano');
        var label = (tituloEl ? tituloEl.textContent.trim() : '') + (anoEl ? ' ' + anoEl.textContent.trim() : '');
        gruposMeses.push({ label: label, cards: Array.prototype.slice.call(cardsVisiveis), mes: coluna.dataset.mes || '' });
      });

      // A ordem já está correta: reordenarGruposDom() ordenou o kanban antes desta chamada
      // (mês atual + futuros crescente, passados decrescente). Re-ordenar aqui causaria double-reverse.

      gruposRenderizados = 0;
      grid.innerHTML = '';
      renderizarBatch();
    }

    function renderizarBatch() {
      var grid = wrapper.querySelector('.scal-grid-cards');
      if (!grid) return;

      var sentinelEl = grid.querySelector('.scal-sentinel');
      if (sentinelEl) sentinelEl.remove();

      var fim = Math.min(gruposRenderizados + MESES_POR_PAGINA, gruposMeses.length);
      for (var i = gruposRenderizados; i < fim; i++) {
        var g = gruposMeses[i];
        var h = document.createElement('div');
        h.className = 'scal-grid-mes-header';
        h.innerHTML =
          '<span class="scal-grid-mes-titulo">' + g.label + '</span>' +
          '<span class="scal-grid-mes-count">' + g.cards.length + ' itens</span>';
        grid.appendChild(h);

        var c = document.createElement('div');
        c.className = 'scal-grid-mes-cards';
        g.cards.forEach(function (card) {
          var clone = card.cloneNode(true);
          clone.classList.remove('scal-card--oculto');
          c.appendChild(clone);
        });
        grid.appendChild(c);
      }
      gruposRenderizados = fim;

      if (gruposRenderizados < gruposMeses.length) {
        var sentinel = document.createElement('div');
        sentinel.className = 'scal-sentinel';
        sentinel.innerHTML =
          '<div class="scal-loading-spinner">' +
          '<span class="material-symbols-outlined scal-loading-icon">autorenew</span>' +
          'Carregando mais...</div>';
        grid.appendChild(sentinel);

        if ('IntersectionObserver' in window) {
          scalObserver = new IntersectionObserver(function (entries) {
            if (entries[0].isIntersecting) {
              scalObserver.disconnect();
              scalObserver = null;
              renderizarBatch();
            }
          }, { rootMargin: '200px 0px' });
          scalObserver.observe(sentinel);
        } else {
          renderizarBatch();
        }
      }
    }

    /* ── Ver mais / Ver menos ── */
    var verMaisBtn = wrapper.querySelector('.scal-ver-mais-btn');
    var verMenosBtn = wrapper.querySelector('.scal-ver-menos-btn');
    if (verMaisBtn) {
      verMaisBtn.addEventListener('click', function () {
        paginaAtual += PAGINA_ITENS;
        aplicarPaginacao();
      });
    }
    if (verMenosBtn) {
      verMenosBtn.addEventListener('click', function () {
        paginaAtual = PAGINA_ITENS;
        aplicarPaginacao();
      });
    }

    /* ── Exportar PDF ── */
    var pdfBtn = wrapper.querySelector('.scal-pdf-btn');
    if (pdfBtn) {
      pdfBtn.addEventListener('click', function () {
        var printFrame = wrapper.querySelector('.scal-print-frame');
        if (!printFrame) return;

        // Limpa frame anterior
        while (printFrame.firstChild) printFrame.removeChild(printFrame.firstChild);

        // Título do bloco
        var tituloEl = wrapper.querySelector('.scal-titulo');
        var titulo = tituloEl ? tituloEl.textContent.trim() : 'Calendário';

        // Filtros ativos em texto
        var filtrosDesc = [];
        if (filtros.ano !== 'todos') filtrosDesc.push('Ano: ' + filtros.ano);
        if (filtros.meses.length > 0) {
          filtrosDesc.push('Meses: ' + filtros.meses.map(function(m) {
            var p = m.split('-');
            return new Date(parseInt(p[0]), parseInt(p[1]) - 1, 1)
              .toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
          }).join(', '));
        }
        if (filtros.status !== 'todos') filtrosDesc.push('Status: ' + filtros.status);
        if (filtros.modalidade !== 'todos') filtrosDesc.push('Modalidade: ' + filtros.modalidade);
        if (filtros.areas.length > 0) filtrosDesc.push('Áreas: ' + filtros.areas.join(', '));

        // Data/hora de exportação
        var agora = new Date();
        var dataExport = agora.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })
          + ' às ' + agora.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });

        // Cabeçalho do PDF
        var cabecalho = document.createElement('div');
        cabecalho.className = 'scal-print-cabecalho';
        cabecalho.innerHTML =
          '<div>' +
            '<p class="scal-print-cabecalho-titulo">' + titulo + '</p>' +
            (filtrosDesc.length > 0 ? '<p class="scal-print-cabecalho-filtros">Filtros aplicados: ' + filtrosDesc.join(' &nbsp;|&nbsp; ') + '</p>' : '') +
          '</div>' +
          '<div class="scal-print-cabecalho-data">Exportado em<br><strong>' + dataExport + '</strong></div>';
        printFrame.appendChild(cabecalho);

        // Coleta grupos visíveis com mesma ordem do renderizarCalendario
        var grupos = [];
        wrapper.querySelectorAll('[data-view-container="kanban"] .scal-coluna').forEach(function(coluna) {
          var cardsVisiveis = coluna.querySelectorAll('.scal-card:not(.scal-card--oculto)');
          if (cardsVisiveis.length === 0) return;
          var tEl = coluna.querySelector('.scal-coluna-titulo');
          var aEl = coluna.querySelector('.scal-coluna-ano');
          var label = (tEl ? tEl.textContent.trim() : '') + (aEl ? ' ' + aEl.textContent.trim() : '');
          grupos.push({ label: label, cards: Array.prototype.slice.call(cardsVisiveis), mes: coluna.dataset.mes || '' });
        });

        // Reordena: mês corrente primeiro (só sem filtro de ano)
        if (filtros.ano === 'todos' && grupos.length > 0) {
          var mesAtualPdf = hoje.getFullYear() + '-' + (hoje.getMonth() + 1 < 10 ? '0' : '') + (hoje.getMonth() + 1);
          var idxPdf = -1;
          for (var pi = 0; pi < grupos.length; pi++) {
            if (grupos[pi].mes >= mesAtualPdf) { idxPdf = pi; break; }
          }
          if (idxPdf > 0) {
            grupos = grupos.slice(idxPdf).concat(grupos.slice(0, idxPdf));
          }
        }

        // Monta grupos com cards clonados (mesmo layout da view "calendário")
        grupos.forEach(function(g) {
          var mesDiv = document.createElement('div');
          mesDiv.className = 'scal-print-mes';

          // Header do mês (mesmo estilo do grid view)
          var header = document.createElement('div');
          header.className = 'scal-grid-mes-header';
          header.innerHTML =
            '<span class="scal-grid-mes-titulo">' + g.label + '</span>' +
            '<span class="scal-grid-mes-count">' + g.cards.length + ' ite' + (g.cards.length === 1 ? 'm' : 'ns') + '</span>';
          mesDiv.appendChild(header);

          // Grid de cards clonados
          var grid = document.createElement('div');
          grid.className = 'scal-grid-mes-cards';
          g.cards.forEach(function(card) {
            var clone = card.cloneNode(true);
            clone.classList.remove('scal-card--oculto');
            // Remove botões de exportar (Google/iCal) do clone
            var actions = clone.querySelector('.scal-card-actions');
            if (actions) actions.remove();
            grid.appendChild(clone);
          });
          mesDiv.appendChild(grid);
          printFrame.appendChild(mesDiv);
        });

        window.print();

        // Limpa após impressão
        while (printFrame.firstChild) printFrame.removeChild(printFrame.firstChild);
      });
    }

    /* ── Nav buttons do kanban ── */
    var board = wrapper.querySelector('.scal-board');
    var btnPrev = wrapper.querySelector('.scal-board-nav--prev');
    var btnNext = wrapper.querySelector('.scal-board-nav--next');
    if (board && btnPrev && btnNext) {
      var SCROLL_STEP = 280;
      function atualizarNavBtns() {
        btnPrev.classList.toggle('scal-board-nav--oculto', board.scrollLeft <= 0);
        btnNext.classList.toggle('scal-board-nav--oculto', board.scrollLeft + board.clientWidth >= board.scrollWidth - 4);
      }
      btnPrev.addEventListener('click', function () { board.scrollBy({ left: -SCROLL_STEP, behavior: 'smooth' }); });
      btnNext.addEventListener('click', function () { board.scrollBy({ left: SCROLL_STEP, behavior: 'smooth' }); });
      board.addEventListener('scroll', atualizarNavBtns, { passive: true });
      atualizarNavBtns();
    }

    /* ── Init ── */
    aplicarFiltros();
  }());

  /* ── Export: Google Calendar / iCal (compartilhado entre instâncias) ── */
  (function () {
    if (window._scalExportInit) return;
    window._scalExportInit = true;

    function pad2(n) { return n < 10 ? '0' + n : '' + n; }

    function parseDtStart(dataInicio, horario) {
      if (!dataInicio) return null;
      var p = dataInicio.split('-');
      if (p.length < 3) return null;
      var base = p[0] + p[1] + p[2];
      if (horario) {
        var t = horario.split(':');
        return base + 'T' + (t[0] || '00') + (t[1] || '00') + '00';
      }
      return base;
    }

    function parseDtEnd(dataInicio, horario) {
      var p = dataInicio.split('-');
      if (horario) {
        var t = horario.split(':');
        var h = parseInt(t[0], 10) + 1;
        return p[0] + p[1] + p[2] + 'T' + pad2(h) + (t[1] || '00') + '00';
      }
      var d = new Date(parseInt(p[0], 10), parseInt(p[1], 10) - 1, parseInt(p[2], 10) + 1);
      return d.getFullYear() + '' + pad2(d.getMonth() + 1) + pad2(d.getDate());
    }

    document.addEventListener('click', function (e) {
      var btn = e.target.closest('.scal-export-btn[data-export]');
      if (!btn) return;
      var card = btn.closest('[data-nome]');
      if (!card) return;
      e.preventDefault();
      e.stopPropagation();

      var nome       = card.dataset.nome || '';
      var dataInicio = card.dataset.dataInicio || '';
      var horario    = card.dataset.horario || '';
      var url        = card.dataset.url || '';
      var tipo       = btn.dataset.export;
      var dtStart    = parseDtStart(dataInicio, horario);
      var dtEnd      = dataInicio ? parseDtEnd(dataInicio, horario) : null;

      if (tipo === 'google') {
        if (!dtStart) return;
        var gcUrl = 'https://calendar.google.com/calendar/render?action=TEMPLATE' +
          '&text=' + encodeURIComponent(nome) +
          '&dates=' + dtStart + '/' + dtEnd +
          (url ? '&details=' + encodeURIComponent(url) : '');
        window.open(gcUrl, '_blank', 'noopener,noreferrer');
      }
    });
  }());
</script>